<template>
  <div class="bodyContainer">
    <div class="subMain">
      <div class="subSplit3">
        <div id="pieGraphDisk" class="chartsDiv"></div>
      </div>
      <div class="subSplit3">
        <div id="pieGraphCpu" class="chartsDiv"></div>
      </div>
      <div class="subSplit3">
        <div id="pieGraphMem" class="chartsDiv"></div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入基本模板,按需加载
let echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/pie')
export default {
  data() {
    return {
      timer: '',
      pieGraphDisk: null,
      diskPieOption: {},
      pieGraphCpu: null,
      cpuPieOption: {},
      pieGraphMem: null,
      memPieOption: {},
      lineChartNet: null,
      netLineOption: {},
      device_name: '',
      disk_usage: '',
      cpu_usage: '',
      mem_usage: '',
    }
  },
  created() {
    this.getDevice()
    this.getSystem()
  },
  mounted() {
    this.initDiskPie()
    this.initCpuPie()
    this.initMemPie()
    this.timer = setInterval(this.getSystem, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    async initDiskPie() {
      let pieGraphDisk = echarts.init(document.getElementById('pieGraphDisk'))
      let diskPieOption = {
        title: {
          text: '0%',
          textStyle: {
            color: '#F3F7FD',
            fontSize: 40,
            fontWeight: 300,
          },
          left: 'center',
          top: '50%',
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '42%',
          style: {
            text: '磁盘存储',
            fill: '#F3F7FD',
            textAlign: 'center',
            fontSize: 20,
            fontWeight: 700,
          },
        },
        angleAxis: {
          max: 100, // 满分
          clockwise: false, // 逆时针
          // 隐藏刻度线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          type: 'category',
          // 隐藏刻度线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        polar: {
          center: ['50%', '50%'],
          radius: '90%', //图形大小
        },
        series: [
          {
            type: 'bar',
            data: [
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: '#63D4F5', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#6089F0', // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
            ],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 12,
            barGap: '-100%', // 两环重叠
            radius: ['49%', '52%'],
            z: 2,
          },
          {
            // 灰色环
            type: 'bar',
            data: [
              {
                value: 100,
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0,0.015)',
                    // 设置扇形的阴影
                    shadowBlur: 25,
                    shadowColor: 'rgba(0,0,0,1)',
                    shadowOffsetX: -10,
                    shadowOffsetY: 10,
                  },
                },
              },
            ],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 16,
            barGap: '-110%', // 两环重叠
            radius: ['48%', '53%'],
            z: 1,
          },
        ],
      }
      pieGraphDisk.setOption(diskPieOption)
      window.addEventListener('resize', function () {
        pieGraphDisk.resize()
      })
      this.pieGraphDisk = pieGraphDisk
      this.diskPieOption = diskPieOption
    },
    async initCpuPie() {
      let pieGraphCpu = echarts.init(document.getElementById('pieGraphCpu'))
      let cpuPieOption = {
        title: {
          text: '0%',
          textStyle: {
            color: '#F3F7FD',
            fontSize: 40,
            fontWeight: 300,
          },
          left: 'center',
          top: '50%',
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '42%',
          style: {
            text: 'CPU',
            fill: '#F3F7FD',
            textAlign: 'center',
            fontSize: 20,
            fontWeight: 700,
          },
        },
        angleAxis: {
          max: 100, // 满分
          clockwise: false, // 逆时针
          // 隐藏刻度线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          type: 'category',
          // 隐藏刻度线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        polar: {
          center: ['50%', '50%'],
          radius: '90%', //图形大小
        },
        series: [
          {
            type: 'bar',
            data: [
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: '#63D4F5', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#6089F0', // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
            ],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 12,
            barGap: '-100%', // 两环重叠
            radius: ['49%', '52%'],
            z: 2,
          },
          {
            // 灰色环
            type: 'bar',
            data: [
              {
                value: 100,
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0,0.015)',
                    // 设置扇形的阴影
                    shadowBlur: 25,
                    shadowColor: 'rgba(0,0,0,1)',
                    shadowOffsetX: -10,
                    shadowOffsetY: 10,
                  },
                },
              },
            ],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 16,
            barGap: '-110%', // 两环重叠
            radius: ['48%', '53%'],
            z: 1,
          },
        ],
      }
      pieGraphCpu.setOption(cpuPieOption)
      window.addEventListener('resize', function () {
        pieGraphCpu.resize()
      })
      this.pieGraphCpu = pieGraphCpu
      this.cpuPieOption = cpuPieOption
    },
    async initMemPie() {
      let pieGraphMem = echarts.init(document.getElementById('pieGraphMem'))
      let memPieOption = {
        title: {
          text: '0%',
          textStyle: {
            color: '#F3F7FD',
            fontSize: 40,
            fontWeight: 300,
          },
          left: 'center',
          top: '50%',
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '42%',
          style: {
            text: '内存',
            fill: '#F3F7FD',
            textAlign: 'center',
            fontSize: 20,
            fontWeight: 700,
          },
        },
        angleAxis: {
          max: 100, // 满分
          clockwise: false, // 逆时针
          // 隐藏刻度线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          type: 'category',
          // 隐藏刻度线
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        polar: {
          center: ['50%', '50%'],
          radius: '90%', //图形大小
        },
        series: [
          {
            type: 'bar',
            data: [
              {
                value: 0,
                itemStyle: {
                  normal: {
                    color: {
                      // 完成的圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: '#63D4F5', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#6089F0', // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
            ],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 12,
            barGap: '-100%', // 两环重叠
            radius: ['49%', '52%'],
            z: 2,
          },
          {
            // 灰色环
            type: 'bar',
            data: [
              {
                value: 100,
                itemStyle: {
                  normal: {
                    color: 'rgba(0,0,0,0.015)',
                    // 设置扇形的阴影
                    shadowBlur: 25,
                    shadowColor: 'rgba(0,0,0,1)',
                    shadowOffsetX: -10,
                    shadowOffsetY: 10,
                  },
                },
              },
            ],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 16,
            barGap: '-110%', // 两环重叠
            radius: ['48%', '53%'],
            z: 1,
          },
        ],
      }
      pieGraphMem.setOption(memPieOption)
      window.addEventListener('resize', function () {
        pieGraphMem.resize()
      })
      this.pieGraphMem = pieGraphMem
      this.memPieOption = memPieOption
    },
    async getSystem() {
      const { data: res } = await this.$http.get('query_system', {
        params: {
          token: window.sessionStorage.getItem('token'),
        },
      })
      if (res.code == '1000') {
        this.cpu_type = res.data.cpu_type

        let runtime_list = res.data.runtime.split(':')
        let day = parseInt(parseInt(runtime_list[0]) / 24)
        let hour = parseInt(runtime_list[0]) % 24
        let minute = parseInt(runtime_list[1])
        this.runtime = day + '天' + hour + '时' + minute + '分'

        let disk = parseInt(res.data.disk_total)
        let disk_g = parseInt(disk / 1024 / 1024)
        if (disk_g / 1024 > 1) {
          this.disk_total = (disk_g / 1024).toFixed(2) + 'T'
        } else {
          this.disk_total = disk_g + 'G'
        }

        let mem = parseInt(res.data.mem_total)
        let mem_g = (mem / 1024 / 1024).toFixed(2)
        this.mem_total = mem_g + 'G'

        this.disk_usage = res.data.disk_usage
        this.cpu_usage = res.data.cpu_usage
        this.mem_usage = res.data.mem_usage
        this.diskPieOption.title.text = this.disk_usage
        this.diskPieOption.series[0].data[0].value = parseInt(
          this.disk_usage.replace('%', '')
        )
        this.pieGraphDisk.setOption(this.diskPieOption)
        this.cpuPieOption.title.text = this.cpu_usage
        this.cpuPieOption.series[0].data[0].value = parseInt(
          this.cpu_usage.replace('%', '')
        )
        this.pieGraphCpu.setOption(this.cpuPieOption)
        this.memPieOption.title.text = this.mem_usage
        this.memPieOption.series[0].data[0].value = parseInt(
          this.mem_usage.replace('%', '')
        )
        this.pieGraphMem.setOption(this.memPieOption)

        this.tx = res.data.tx
        this.rx = res.data.rx
      }
    },
  },
}
</script>
<style lang="less" scoped>
.bodyContainer {
  width: 100%;
}
.subMain {
  width: 100%;
  position: absolute;
  top: 60px;
  bottom: 0;
  background: #201f1f;
}
.subSplit3 {
  width: 33.3%;
  height: 100%;
  float: left;
  vertical-align: middle;
  text-align: center;
}
.chartsDiv {
  width: 100%;
  height: 100%;
}
</style>
